<template>
	<div class="risk">
		<div class="add" @click="submit()">完成</div>
		<div>
			<van-search class="info_search" v-model="value" placeholder="搜索" />
		</div>
		<van-checkbox-group v-model="result" @change="hanndleChangeOne()">
			<van-tabs v-model="active">
				<van-tab title="风险位置">
					<van-list
						style="margin-top: 5px"
						:finished="finished"
						v-model="loading"
						finished-text="没有更多了"
						@load="onLoad"
					>
						<div class="all_dep" @click="goDepartment">
							所有部门<van-icon name="arrow-down" />
						</div>
						<div class="dep_item">
							<div class="dep_item_detail" v-for="item in list" :key="item.ID">
								<div class="dep_item_detail_list">
									<div style="width: 300px">
										<div class="dep_name">{{ item.RiskUnitName || '无' }}</div>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_org.png"
												alt=""
											/>
											<div>部门：{{ item.OrgName || '无' }}</div>
										</div>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_equ_type.png"
												alt=""
											/>
											<div>班组：{{ item.TeamName || '无' }}</div>
										</div>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_post.png"
												alt=""
											/>
											<div>岗位：{{ item.OrgPostName || '无' }}</div>
										</div>

										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_type.png"
												alt=""
											/>
											<div>设备设施：{{ item.EquipmentName || '无' }}</div>
										</div>
									</div>
									<van-checkbox :name="item" ref="checkboxes" />
								</div>
								<van-divider />
								<div class="dep_btm">
									<div class="btm_item" @click="goRiskLocation(item)">
										<img
											src="@/assets/Images/AppIcon/icon_list_edit.png"
											alt=""
										/>
										<div class="mr-10">编辑</div>
									</div>
									<!-- <div class="btm_item" @click="del(item)">
							<img src="@/assets/Images/AppIcon/icon_delete.png" alt="" />
							<div>删除</div>
						</div> -->
								</div>
							</div>
						</div>
					</van-list>
				</van-tab>
				<van-tab title="风险点">
					<van-list
						style="margin-top: 5px"
						:finished="finished1"
						v-model="loading"
						finished-text="没有更多了"
						@load="onLoad1"
					>
						<div>
							<!-- <div class="all_dep" @click="goDepartment">
				所有部门<van-icon name="arrow-down" />
			</div>
            <div class="all_dep" >
				所有类型<van-icon name="arrow-down" />
			</div> -->
							<van-dropdown-menu active-color="#1989fa">
								<van-dropdown-item title="所有部门" @open="goDepartment" />
								<van-dropdown-item
									title="所有类型"
									:options="typeList"
									@change="changeType"
								/>
							</van-dropdown-menu>
						</div>

						<div class="dep_item">
							<div
								class="dep_item_detail"
								v-for="(item, index) in dangerList"
								:key="item.ID"
							>
								<div class="dep_item_detail_list">
									<div style="width: 300px">
										<div class="dep_name">
											{{ index + 1 }}、{{ item.RiskPointName }}
										</div>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_group.png"
												alt=""
											/>
											<div>部门：{{ item.OrgName || '无' }}</div>
										</div>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_equ_type.png"
												alt=""
											/>
											<div>类型：{{ item.RPTypeName || '无' }}</div>
										</div>
										<van-row>
											<van-col span="10">
												<div class="dep_sort">
													<img
														src="@/assets/Images/AppIcon/icon_list_post.png"
														alt=""
													/>
													<div>岗位：{{ item.OrgPostName || '无' }}</div>
												</div>
											</van-col>
											<van-col span="14">
												<div class="dep_sort">
													<img
														src="@/assets/Images/AppIcon/icon_list_date.png"
														alt=""
													/>
													<div>班组：{{ item.TeamName || '无' }}</div>
												</div>
											</van-col>
										</van-row>
										<van-row>
											<van-col>
												<div class="dep_sort">
													<img
														src="@/assets/Images/AppIcon/icon_list_equip.png"
														alt=""
													/>
													<div>设备工具：{{ item.EquipmentName || '无' }}</div>
												</div>
											</van-col>
										</van-row>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_chem.png"
												alt=""
											/>
											<div>危险介质：{{ item.ChemName || '无' }}</div>
										</div>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_danger.png"
												alt=""
											/>
											<div>职业病危害因素：{{ item.HazardName || '无' }}</div>
										</div>
									</div>
									<van-checkbox :name="item" ref="checkboxes" />
								</div>
							</div>
						</div>
					</van-list>
				</van-tab>
				<van-tab title="部门/班组">
					<van-list
						style="margin-top: 5px"
						:finished="finished2"
						v-model="loading"
						finished-text="没有更多了"
						@load="onLoad2"
					>
						<div class="dep_item">
							<div
								class="dep_item_detail"
								v-for="(item, index) in userList"
								:key="index"
							>
								<div class="dep_item_detail_list">
									<div style="width: 300px">
										<div class="dep_name">
											{{ item.OrgName }}
										</div>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_task.png"
												alt=""
											/>
											<div>检查表：{{ item.TNames || '无' }}</div>
										</div>
									</div>
									<van-checkbox :name="item" ref="checkboxes" />
								</div>
							</div>
						</div>
					</van-list>
				</van-tab>
				<van-tab title="设备设施">
					<van-list
						style="margin-top: 5px"
						:finished="finished3"
						v-model="loading"
						finished-text="没有更多了"
						@load="onLoad3"
					>
						<div>
							<van-dropdown-menu active-color="#1989fa">
								<van-dropdown-item title="所有部门" @open="goDepartment" />
								<van-dropdown-item
									title="所有类型"
									:options="equipmentType"
									@change="changeEquipmentType"
								/>
							</van-dropdown-menu>
						</div>

						<div class="dep_item">
							<div
								class="dep_item_detail"
								v-for="(item, index) in equipmentList"
								:key="index"
							>
								<div class="dep_item_detail_list">
									<div style="width: 300px">
										<div class="dep_name">
											{{ item.EquipmentName }}
										</div>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_group.png"
												alt=""
											/>
											<div>编号：{{ item.EquipmentNo || '无' }}</div>
										</div>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_money.png"
												alt=""
											/>
											<div>类型：{{ item.EquipmentTypeName || '无' }}</div>
										</div>

										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_group.png"
												alt=""
											/>
											<div>使用部门：{{ item.OrgName || '无' }}</div>
										</div>
									</div>
									<van-checkbox :name="item" ref="checkboxes" />
								</div>
							</div>
						</div>
					</van-list>
				</van-tab>
			</van-tabs>
		</van-checkbox-group>
	</div>
</template>

<script>
import { list, del } from '@/api/riskUnit'
import {
	getDepartmentUser,
} from '@/api/userOrg'
import {
		getEquEquipmentList,
	getEquipmentTypeParams,
} from '@/api/equipment'
import {
	getRiskPointTypeParams,
	getRiskPointData,

} from '@/api/riskPoint'
export default {
	data() {
		return {
			result: [],
			active: 0,
			loading: false,
			finished: false,
			list: [],
			activeNames: ['1'],
			border: false,
			value: '',
			filter: {
				page: 0,
				dataType: 'DangerHiddenArea',
			},
			typeList: [],
			filter1: {
				page: 0,
				dataType: 'DangerHiddenArea',
				conditions: [
					{ IsTemp: false, Name: 'OrgCode', Operator: '\u003d', Value: '' },
					{ IsTemp: false, Name: 'RPType', Operator: '\u003d', Value: '' },
				],
			},
			finished1: false,
			dangerList: [],
			filter2: {
				page: 0,
				dataType: 'DangerHiddenArea',
			},
			finished2: false,
			userList: [],
			finished3: false,
			filter3: {
				page: 0,
				dataType: 'DangerHiddenArea',
				conditions: [
					{
						IsTemp: false,
						Name: 'OperateOrgCode',
						Operator: '\u003d',
						Value: '',
					},
					{
						IsTemp: false,
						Name: 'EquipmentType',
						Operator: '\u003d',
						Value: '',
					},
				],
			},
			equipmentList: [],
			equipmentType: [],
		}
	},

	created() {
		this.getSiteRiskUnit()
		// 类别
		this.getRiskPointTypeParams()
		// 风险点
		this.getRiskPointData()
		// 部门
		this.getDepartmentUser()
		// 设备
		this.getEquEquipmentList()
		// 设备分类
		this.getEquipmentTypeParams()
	},
	beforeRouteLeave(to, from, next) {
		to.params.id = this.$route.params.id

		next() //继续下一步
	},
	methods: {
		hanndleChangeOne() {},
		submit() {
			let Details3 = []
			this.result.filter((item) => {
				if (item.TCodesList) {
					Details3.push({
						CheckAreaCode: item.RUCode,
						CheckObjectsType: 2,
						CheckAreaType: 'RiskUnit',
						CheckArea: item.RiskUnitName + `（${item.OrgName}）`,
						TCodes: item.TCodes,
						TNames: item.TNames
					})
				} else {
					Details3.push({
						CheckAreaCode: item.RUCode,
						CheckObjectsType: 2,
						CheckAreaType: 'RiskUnit',
						CheckArea: item.RiskUnitName + `（${item.OrgName}）`,
					})
				}
			})
			// 			Details3[0].CheckObjectsType	2
			// Details3[0].CheckAreaType	UserOrg
			// Details3[0].CheckAreaCode	BM19013000001
			// Details3[0].CheckArea	开发部(开发部)
			// Details3[0].TCodes	TC20111300022
			// Details3[0].TNames	部门检查表-开发部
			// Details3[1].CheckObjectsType	2
			// Details3[1].CheckAreaType	UserOrg
			// Details3[1].CheckAreaCode	BM19031200003
			// Details3[1].CheckArea	开发部>开发1部(开发1部)

			this.$router.push({
				name: this.$route.params.path,
				params: { Details3 },
			})
		},
		onLoad() {
			this.loading = true
			++this.filter.page
			list(this.filter).then((res) => {
				this.loading = false
				this.filter.page = res.data.PageIndex
				this.list = this.list.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.finished = true
				}
			})
		},
		// 风险点
		onLoad1() {
			this.loading = true
			++this.filter1.page
			getRiskPointData(this.filter1)
				.then((res) => {
					this.loading = false
					this.filter1.page = res.data.PageIndex
					this.dangerList = this.dangerList.concat(res.data.Data)
					if (!res.data.HasNextPage) {
						this.finished1 = true
					}
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		onLoad2() {
			this.loading = true
			++this.filter2.page
			getDepartmentUser(this.filter2)
				.then((res) => {
					this.loading = false
					this.filter2.page = res.data.PageIndex
					this.userList = this.userList.concat(res.data.Data)
					if (!res.data.HasNextPage) {
						this.finished2 = true
					}
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		onLoad3() {
			this.loading = true
			++this.filter3.page
			getEquEquipmentList(this.filter3)
				.then((res) => {
					this.loading = false
					this.filter3.page = res.data.PageIndex
					this.equipmentList = this.userList.concat(res.data.Data)
					if (!res.data.HasNextPage) {
						this.finished3 = true
					}
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		getSiteRiskUnit() {
			this.loading = true
			list(this.filter)
				.then((res) => {
					this.loading = false
					if (!res.data.HasNextPage) {
						this.finished = true
					}
					this.list = res.data.Data
					this.filter.page = res.data.PageIndex
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 风险点
		getRiskPointData() {
			this.loading = true

			getRiskPointData(this.filter1)
				.then((res) => {
					this.loading = false
					if (!res.data.HasNextPage) {
						this.finished1 = true
					}
					this.dangerList = res.data.Data
					this.filter1.page = res.data.PageIndex
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 获取风险点所有类别 getRiskPointTypeParams
		getRiskPointTypeParams() {
			getRiskPointTypeParams()
				.then((res) => {
					res.data.unshift({
						ID: '',
						Name: '所有类型',
					})
					res.data.forEach((item) => {
						item.text = item.Name
						item.value = item.ID
					})
					this.typeList = res.data
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 获取部门
		getDepartmentUser() {
			this.loading = true
			getDepartmentUser(this.filter2)
				.then((res) => {
					this.loading = false
					if (!res.data.HasNextPage) {
						this.finished2 = true
					}
					this.userList = res.data.Data
					this.filter2.page = res.data.PageIndex
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		getEquipmentTypeParams() {
			getEquipmentTypeParams()
				.then((res) => {
					res.data.unshift({
						ID: '',
						Name: '所有类型',
					})
					res.data.forEach((item) => {
						item.text = item.Name
						item.value = item.ID
					})
					this.equipmentType = res.data
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 设备设施
		getEquEquipmentList() {
			this.loading = true
			getEquEquipmentList(this.filter3)
				.then((res) => {
					this.loading = false
					if (!res.data.HasNextPage) {
						this.finished3 = true
					}
					this.equipmentList = res.data.Data
					this.filter3.page = res.data.PageIndex
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 选择部门
		goDepartment() {
			this.$router.push('/Site_RiskUnit/Department')
		},
		// 选择所有类别
		changeType(val) {
			// console.log(val, 'sasasa')
			this.filter1.conditions[1].Value = val
			this.getRiskPointData()
		},
		changeEquipmentType(val) {
			this.filter3.conditions[1].Value = val
			this.getEquEquipmentList()
		},
		add() {
			this.$router.push('/Site_RiskUnit/Add_RiskLocation')
		},
		// 编辑风险位置
		goRiskLocation(item) {
			this.$router.push('/Site_RiskUnit/RiskLocation?id=' + item.ID)
		},
		// 风险位置详情
		goDetail(item) {
			this.$router.push({
				name: this.$route.params.path,
				params: {
					list: item,
					id: this.$route.params.id,
					key: this.$route.params.key,
				},
			})
		},
		del(item) {
			const _this = this
			const id = item.ID
			this.$dialog
				.confirm({
					title: '询问',
					message: '您确定删除本条风险位置吗？',
				})
				.then(() => {
					del({ id })
						.then((res) => {
							_this.getSiteRiskUnit()
						})
						.catch((err) => {
							console.log('err', err)
						})
				})
				.catch(() => {
					// on cancel
				})
		},
	},
}
</script>
<style lang="less" scoped>

</style>
<style lang="less">
.risk {
	height: 100vh;
	background-color: #e8f1f8;
	.info_search {
		padding: 10px;
		border-radius: 5px !important;
		.van-field__control {
			background-color: #ffffff !important;
		}
	}
}
.all_dep {
	background-color: #ffffff;
	padding: 10px;
	text-align: center;
}
.dep_item {
	width: 100%;
	padding: 10px;
	background-color: #e8f1f8;
}
.dep_item_detail {
	/* margin: 10px;*/
	padding: 10px;
	border-radius: 5px;
	background-color: #ffffff;
	position: relative;
	margin-bottom: 10px;
	/* border-bottom: 1px solid #e8f1f8;*/
	.dep_name {
		font-size: 14px;
		margin-bottom: 10px;
	}
	.dep_sort {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		font-size: 13px;
		img {
			height: 15px;
			width: 15px;
			margin-right: 5px;
		}
	}
	.dep_btm {
		display: flex;
		justify-content: flex-end;
		font-size: 12px;
		.btm_item {
			display: flex;
			align-items: center;
			img {
				height: 15px;
				width: 15px;
				margin-right: 5px;
			}
		}
	}
}
.dep_item_detail_list {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
